<style scoped lang="less"></style>
<template>
  <iot-blk class="company-blk" title="应急保障情况" :moreType="0">
    <div class="chart" id="chart"></div>
  </iot-blk>
</template>
<script>
import HighCharts from "highcharts";
import { mapState } from "vuex";
export default {
  name: "IOTCompany",
  props: {
    type: {
      type: String,
      default: "fireControl",
    },
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
    stops() {
      let stops = [];
      switch (this.type) {
        case "fire":
        case "chargingStation":
          stops = [
            [0, "#C878F6"],
            [1, "#6886FC"],
          ];
          break;
        case "pool":
          stops = [
            [0, "#FAD961"],
            [1, "#F76B1C"],
          ];
          break;
        case "smoke":
          stops = [
            [0, "#18C1FF"],
            [1, "#1597FF"],
          ];
          break;
        case "monitor":
          stops = [
            [0, "#3023AE"],
            [1, "#B4EC51"],
          ];
          break;
        case "gas":
          stops = [
            [0, "#614CED"],
            [1, "#43FFD8"],
          ];
          break;
        default:
          stops = [
            [0, "#44B4FF"],
            [1, "#026FF4"],
          ];
          break;
      }
      return stops;
    },
  },
  watch: {
    scale() {
      this.setData();
    },
    data() {
      this.setData();
    },
  },
  data() {
    return {
      loading: false,
      chartData: null,
    };
  },
  methods: {
    renderChart(chartData) {
      let that = this;
      let width = this.scale * 380;
      let height = this.scale * 200;
      let options = {
        credits: {
          enabled: false,
        },
        chart: {
          width: width,
          height: height,
          type: "bar",
          backgroundColor: "transparent",
          spacing: 0,
          margin: [5, 0, 5, 160 * this.scale],
        },
        title: {
          text: "",
        },
        xAxis: {
          categories: chartData.categories,
          title: {
            text: null,
          },
          labels: {
            style: {
              color: "#AFECFF",
              fontSize: 12 * this.scale,
            },
            padding: 0,
            y: 1,
            overflow: "justify",
          },
          lineWidth: 0,
        },
        yAxis: {
          enabled: false,
          min: 0,
          title: {
            text: "",
            align: "high",
          },
          labels: {
            enabled: false,
          },
          minorGridLineWidth: 1,
          lineWidth: 0,
          tickWidth: 0,
          tickPosition: "inside",
          tickmarkPlacement: "between",
          tickColor: "#646a76",
          gridLineWidth: 0,
        },
        legend: {
          enabled: false,
        },
        tooltip: {
          valueSuffix: "",
        },
        plotOptions: {
          bar: {
            borderRadius: 7 * this.scale,
            pointWidth: 14 * this.scale,
            dataLabels: {
              enabled: true,
              allowOverlap: true, // 允许数据标签重叠
              color: "#AFECFF",
              borderWidth: 0,
              style: {
                fontSize: 14 * this.scale + "px",
              },
            },
            borderWidth: 0,
            color: "#5febfb",
          },
        },
        series: chartData.series,
      };
      function setEveryOnePointColor(chart) {
        //获得第一个序列的所有数据点
        var pointsList = chart.series[0].points;
        //遍历设置每一个数据点颜色
        for (var i = 0; i < pointsList.length; i++) {
          chart.series[0].points[i].update({
            color: {
              linearGradient: { x1: 0, y1: 1, x2: 0, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
              stops: that.stops,
            },
          });
        }
      }
      HighCharts.chart("chart", options, function(chart) {
        setEveryOnePointColor(chart);
      });
    },

    setData() {
      let chartData = {
        categories: [
          "应急物资总数",
          "应急避难场所",
          "应急专家数",
          "应急队伍数",
          "微型消防站数量",
        ],
        series: [
          {
            name: "数量",
            data: [
              this.data.material || 0,
              this.data.placeNumber || 0,
              this.data.proNumber || 0,
              this.data.teamNumber || 0,
              this.data.fireStation || 0,

            ],
          },
        ],
      };
      this.renderChart(chartData);
    },
  },
  created() {},
  mounted() {
    this.setData();
  },
};
</script>
